<template>
  <div id="addDormitoryDialog">
    <el-dialog title="新增" :visible.sync="addDormitoryDialogVisible" width="500px" :before-close="close">
      <el-form :model="addDormitoryForm" ref="addDormitoryForm" label-width="80px" :rules="rules">
        <el-form-item label="寝室名" prop="name">
          <el-input v-model="addDormitoryForm.name" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="addDormitoryForm.gender" @change="getBuilding" placeholder="请选择性别" style="width: 300px">
            <el-option
              v-for="item in genderOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="床位" prop="bedNum">
          <el-input v-model="addDormitoryForm.bedNum" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="所属楼栋" prop="buildingId">
          <el-select v-model="addDormitoryForm.buildingId" placeholder="请选择所属楼栋" style="width: 300px">
            <el-option
              v-for="item in buildingOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="addDormitory">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import building from '../../api/dormitory/building'
  import dormitory from '../../api/dormitory/dormitory'

  export default {
    name: 'addDormitoryDialog',
    props: ['addDormitoryDialogVisible'],
    data() {
      return {
        genderOptions: [
          {
            label: '男孩',
            value: 0
          },
          {
            label: '女孩',
            value: 1
          }
        ],
        buildingOptions: [],
        addDormitoryForm: {},
        rules: {
          name: [
            {required: true, message: '请输入寝室名', trigger: 'blur'},
            {max: 10, message: '长度小于10字符', trigger: 'blur'}
          ],
          buildingId: [
            {required: true, message: '请选择所属楼栋', trigger: 'change'}
          ],
          gender: [
            {required: true, message: '请选择性别', trigger: 'change'}
          ],
          bedNum: [
            {required: true, message: '请输入床位', trigger: 'change'}
          ]
        }
      }
    },
    methods: {
      /*添加寝室*/
      addDormitory() {
        this.$refs["addDormitoryForm"].validate(valid => {
          if (valid){
            dormitory.addDormitory(this.addDormitoryForm).then(() => {
              this.close()
              this.$message.success('添加成功')
            })
          }else {
            this.$message.error("请正确填写信息")
          }
        })
      },
      /*获取请示*/
      getBuilding() {
        building.getBuildingByGender(this.addDormitoryForm.gender).then(result => {
          this.buildingOptions = result.data
        })
      },
      /*关闭*/
      close() {
        this.$refs['addDormitoryForm'].resetFields()
        this.$parent.closeDialog()
      }
    }
  }
</script>

<style scoped>

</style>
